<template>
  <div>
    <van-cell-group class="item">
      <van-cell :to="`/article/${newsItem.art_id}`">
        <!-- 标题 -->
        <template #title>
          <div class="van-multi-ellipsis--l3">
            {{ newsItem.title }}
          </div>
        </template>

        <template #label>
          <!-- 图片3 -->
          <div v-if="newsItem.cover.type === 3" class="img-center">
            <van-image fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            <van-image fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            <van-image fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          </div>
          <!-- 作者、评论、时间 -->
          <div class="time-bottom">
            <span>作者 {{ newsItem.aut_name }}</span>
            <span>{{ newsItem.comm_count }} 评论</span>
            <span>{{ newsItem.pubdate | relative }}</span>
          </div>
        </template>
        <!-- 图片1 -->
        <template #default v-if="newsItem.cover.type === 1">
          <van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'NewsList-Item',
  props: {
    newsItem: {
      type: Object,
      require: true
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  .van-cell__value {
    flex: unset;
    width: 116px;
    height: 73px;
    margin-left: 12px;
  }
  .img-center {
    display: flex;
    .van-image {
      flex: 1;
    }
  }
  .time-bottom {
    span {
      margin-right: 10px;
    }
  }
}
</style>
